<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Chat</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="app-container">
        <!-- 登录面板 -->
        <div class="login-panel" id="loginPanel">
            <div class="login-box">
                <h2>Enter Chat</h2>
                <input type="text" id="usernameInput" placeholder="Your Name" required>
                <button id="loginButton">Join Chat</button>
            </div>
        </div>
        
        <!-- 主聊天界面 -->
        <div class="main-chat hidden" id="mainChat">
            <!-- 用户列表 -->
            <div class="user-list" id="userList">
                <div class="header">
                    <div class="current-user-info">
                        <img id="currentUserAvatar" class="user-avatar" src="" alt="You">
                        <span id="currentUserName"></span>
                    </div>
                </div>
                <div class="user-list-content">
                    <div class="user-list-items" id="userListItems">
                        <div class="no-users">Connecting to server...</div>
                    </div>
                </div>
            </div>
            
            <!-- 聊天区域 -->
            <div class="chat-area" id="chatArea">
                <div class="chat-header">
                    <button class="back-button hidden" id="backButton">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="19" y1="12" x2="5" y2="12"></line>
                            <polyline points="12 19 5 12 12 5"></polyline>
                        </svg>
                    </button>
                    <div class="chat-partner-info">
                        <img id="chatPartnerAvatar" class="user-avatar" src="" alt="Partner">
                        <div>
                            <h2 id="currentChatTitle">Select a user</h2>
                            <span id="chatPartnerStatus" class="status offline">offline</span>
                        </div>
                    </div>
                </div>
                
                <!-- 消息区域 -->
                <div class="chat-messages" id="chatMessages">
                    <div class="default-chat-view">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                        </svg>
                        <p>Select a user to start chatting</p>
                    </div>
                </div>
                
                <!-- 输入区域 -->
                <div class="chat-input hidden" id="chatInput">
                    <input type="text" id="messageInput" placeholder="Type a message..." autocomplete="off">
                    <button id="sendButton">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="22" y1="2" x2="11" y2="13"></line>
                            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/script.js"></script>
</body>
</html>